<template>
  <div class="register-view"> <!-- 根元素 -->
    <!-- 标题 -->
    <h2 class="page-title">校园配送系统-注册</h2>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm form-container">
      <!-- 用户ID -->
      <el-form-item label="用户ID" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item label="密码" prop="pwd1">
        <el-input v-model="ruleForm.pwd1" type="password"></el-input>
      </el-form-item>

      <!-- 确认密码 -->
      <el-form-item label="确认密码" prop="pwd2">
        <el-input v-model="ruleForm.pwd2" type="password"></el-input>
      </el-form-item>

      <!-- 选择身份 -->
      <el-form-item label="注册身份" prop="role">
        <el-select v-model="ruleForm.role" placeholder="请选择注册身份" class="full-width">
          <el-option label="商家" value="商家"></el-option>
          <el-option label="消费者" value="消费者"></el-option>
          <el-option label="配送员" value="配送员"></el-option>
        </el-select>
      </el-form-item>

      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="creating">注册</el-button>
        <el-button type="primary" @click="goToLogin">返回登录界面</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      creating: false, // 控制注册按钮的加载状态
      ruleForm: {
        name: '', // 用户名
        pwd1: '', // 密码
        pwd2: '', // 确认密码
        role: '', // 用户角色
      },
      rules: {
        name: [
          { required: true, message: '请输入用户ID', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ],
        pwd1: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 10, message: '密码长度应在 6 到 10 个字符之间', trigger: 'blur' }
        ],
        pwd2: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { min: 6, max: 10, message: '密码长度应在 6 到 10 个字符之间', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择注册身份', trigger: 'change' }
        ],
      }
    };
  },
  methods: {
    // 检查表单是否为空
    checkFormEmpty() {
      if (!this.ruleForm.name || !this.ruleForm.pwd1 || !this.ruleForm.pwd2 || !this.ruleForm.role) {
        this.$message.error('请完整填写所有必填项');
        return false;
      }
      return true;
    },

    // 判断两次输入的密码是否一致
    checkPasswordMatch() {
      if (this.ruleForm.pwd1 !== this.ruleForm.pwd2) {
        this.$message.error('两次密码输入不一致');
        return false;
      }
      return true;
    },

    // 提交表单
  submitForm(formName) {
    // 校验表单是否为空
    if (!this.checkFormEmpty()) {
      return;
    }

    // 校验密码是否一致
    if (!this.checkPasswordMatch()) {
      return;
    }

    // 进行表单验证
    this.$refs[formName].validate(async (valid) => {
      if (!valid) {
        this.$message.error('表单验证失败');
        return;
      }

      // 设置加载状态
      this.creating = true;

      try {
        const response = await this.$axios.post('/add', {
          username: this.ruleForm.name,
          password: this.ruleForm.pwd1,
          role: this.ruleForm.role
        });

        // 确保response.data存在
        if (response.data) {
          if (response.data.code === "200") {
            this.$message.success('注册成功！3秒后跳转到登录页面...');
            this.resetForm('ruleForm');

                   // 添加延时跳转
            setTimeout(() => {
              this.$router.push('/');
        }, 3000); // 3000毫秒 = 3秒

          } else {
            this.$message.error(response.data.message || '注册失败，请稍后再试');
          }
        } else {
          this.$message.error('服务器响应格式错误');
        }
      } catch (error) {
        console.error('注册错误:', error);
      } finally {
        this.creating = false;
      }
    });
  },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields(); // 使用 Element UI 提供的重置方法
    },

    // 跳转到登录页面
    goToLogin() {
      console.log('跳转到登录界面');
      this.$router.push('/'); // 跳转到登录页面
    }
  }
};
</script>


<style>
/* 页面居中和大小调整 */
.register-view {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 垂直排列标题和表单 */
  height: 100vh;
  background-image: url('@/assets/bg1.png'); /* 设置背景图片 */
  background-size: 60%; /* 适当缩小背景图片 (110%表示比默认尺寸小一点) */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
}

.page-title {
  font-size: 36px; /* 增大标题的字体 */
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 使输入框居中 */
  justify-content: center;
  width: 400px;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.8); /* 添加半透明白色背景，以增强可读性 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 设置下拉框宽度 */
.full-width {
  width: 100%; /* 让下拉框与输入框宽度一致 */
}
</style>
